<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        .container {
            max-width: 1200px;
        }

        /* navbar override removed; use global fragment styles */

        .navbar-brand {
            color: #66b2ff !important;
            font-weight: bold;
        }

        /* 移除页面级 nav-link 覆盖，统一使用全局片段交互样式 */

        .card {
            background-color: #1e1e1e;
            border: 1px solid rgba(102, 178, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            border-color: rgba(102, 178, 255, 0.3);
        }

        .card-header {
            background-color: rgba(102, 178, 255, 0.1);
            border-bottom: 1px solid rgba(102, 178, 255, 0.1);
            color: #66b2ff;
            font-weight: bold;
        }

        .card-body {
            padding: 20px;
        }

        .btn-primary {
            background-color: #66b2ff;
            border-color: #66b2ff;
        }

        .btn-primary:hover {
            background-color: #5095db;
            border-color: #5095db;
        }

        .btn-outline-primary {
            color: #66b2ff;
            border-color: #66b2ff;
        }

        .btn-outline-primary:hover {
            background-color: #66b2ff;
            color: #fff;
        }

        .form-control,
        .form-select {
            background-color: #2d2d2d;
            border: 1px solid #444;
            color: #e0e0e0;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: #333;
            border-color: #66b2ff;
            box-shadow: 0 0 0 0.25rem rgba(102, 178, 255, 0.25);
            color: #e0e0e0;
        }

        .form-label {
            color: #ccc;
        }

        .alert {
            margin-bottom: 20px;
            background-color: #1e1e1e;
            border: 1px solid rgba(102, 178, 255, 0.2);
            color: #e0e0e0;
        }

        .alert-success {
            border-left: 4px solid #28a745;
        }

        .alert-danger {
            border-left: 4px solid #dc3545;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 3px solid #66b2ff;
        }

        .profile-info h1 {
            margin-bottom: 5px;
            color: #66b2ff;
        }

        .profile-info p {
            color: #aaa;
            margin-bottom: 0;
        }

        .profile-badge {
            background-color: rgba(102, 178, 255, 0.1);
            color: #66b2ff;
            border: 1px solid rgba(102, 178, 255, 0.3);
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<!-- 导航栏替换为统一片段 -->
<div th:replace="~{fragments/navbar :: navbar}"></div>

<div class="container">
    <!-- 显示消息 -->
    <div class="alert alert-success alert-dismissible fade show" th:if="${message}" role="alert">
        <i class="bi bi-check-circle-fill"></i> <span th:text="${message}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" th:if="${error}" role="alert">
        <i class="bi bi-exclamation-triangle-fill"></i> <span th:text="${error}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- 个人信息标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-person-gear"></i> 个人信息</h1>
        <div>
            <a href="/admin" class="btn btn-outline-primary"><i class="bi bi-arrow-left"></i> 返回管理面板</a>
        </div>
    </div>

    <!-- 个人信息卡片 -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-person-circle"></i> 个人资料
                </div>
                <div class="card-body text-center">
                    <img th:if="${user.avatarUrl}" th:src="${user.avatarUrl}" alt="头像" class="profile-avatar mb-3">
                    <img th:unless="${user.avatarUrl}" src="https://via.placeholder.com/150" alt="默认头像"
                         class="profile-avatar mb-3">
                    <h3 th:text="${user.nickname ?: user.username}">用户名</h3>
                    <p class="text-muted" th:text="${user.email ?: '未设置邮箱'}">邮箱</p>
                    <div class="mt-3">
                            <span th:each="role : ${user.roles}" class="badge profile-badge me-1"
                                  th:text="${#strings.replace(role.name, 'ROLE_', '')}"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-pencil-square"></i> 编辑个人信息
                </div>
                <div class="card-body">
                    <form th:action="@{/admin/profile/update}" method="post" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" th:value="${user.username}"
                                   disabled>
                            <div class="form-text text-muted">用户名不可修改</div>
                        </div>

                        <div class="mb-3">
                            <label for="nickname" class="form-label">昵称</label>
                            <input type="text" class="form-control" id="nickname" name="nickname"
                                   th:value="${user.nickname}">
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" name="email"
                                   th:value="${user.email}">
                        </div>

                        <div class="mb-3">
                            <label for="avatarFile" class="form-label">头像</label>
                            <input type="file" class="form-control" id="avatarFile" name="avatarFile"
                                   accept="image/*">
                            <div class="form-text text-muted">支持JPG、PNG格式，建议尺寸200x200像素</div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" name="newPassword">
                            <div class="form-text text-muted">如不修改密码请留空</div>
                        </div>

                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
                        </div>

                        <div class="mb-3">
                            <label for="currentPassword" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="currentPassword" name="currentPassword">
                            <div class="form-text text-muted">进行任何修改都需要输入当前密码</div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap 组件初始化已由 turbo-fixes.js 统一管理 -->
</body>

</html>